import React, { useEffect, useState } from 'react';
import * as service from '../../api/jiang/index'
import '../../styles/jiang/DataEducation.scss'
import { DatePicker, Space, Table, Button, Select,Card } from 'antd';
import { Pie } from '@ant-design/plots';

interface Props {

}

const { RangePicker } = DatePicker;

function DataEducation(props: Props) {
    const [educatelist, setEducatelist] = useState([])
    const [loading, setLoading] = useState(false);
    const [listerone, setListerone] = useState([])
    const [listertwo, setListertwo] = useState([])
    const [listerthree, setListerthree] = useState([])
    const [data, setData] = useState([])

    useEffect(() => {
        setLoading(true);
        service.educate_list().then((res) => {
            // console.log(res);
            setEducatelist(res.data)
            setData(res.data)
            setLoading(false);

        })

        service.optionlist().then((res) => {
            // console.log(res);
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setListerone(arr)
        })

        service.teamlist().then((res) => {
            // console.log(res);
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setListertwo(arr)
        })

        service.teamlistwo().then((res) => {
            // console.log(res);
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setListerthree(arr)
        })
    }, [])

    const onChange = (value: any, dateString: any) => {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
    };

    const onOk = (value: any) => {
        console.log('onOk: ', value);
    };

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };





    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '学历',
            dataIndex: 'education',
            key: 'education',
        },
        {
            title: '人次',
            dataIndex: 'population',
            key: 'population',
        },
        {
            title: '比例',
            dataIndex: 'proportional',
            key: 'proportional',
        }
    ]

    
    const config = {
        // legend:false,
        appendPadding: 10,
        data,
        angleField: 'population',
        colorField: 'education',
        radius: 1,
        innerRadius: 0.6,
        label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
                textAlign: 'center',
                fontSize: 14,
            },
        },
        interactions: [
            {
                type: 'element-selected',
            },
            {
                type: 'element-active',
            },
        ],
        statistic: {
            // title:false,
            content: {
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                },
                content: '居民总数\n920',
            },
        },
    };
    return (
        <div className='data-education' style={{ padding: 20 }}>
            <div className='title'>居民学历统计</div>

            <Space direction="vertical" size={12}>
                <div>
                    <span>选择签约日期</span>&nbsp;&nbsp;
                    <RangePicker
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        onChange={onChange}
                        onOk={onOk}
                    />
                </div>
            </Space>

            <div className='top'>
                <div className='padding'>
                    <span>机构</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="全部"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listerone
                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生团队</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listertwo
                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listerthree
                        }
                    />
                </div>

            </div>
            <div style={{ padding: "0 100px" }}>
            <Card title="居民学历构成">
                <Pie {...config} />
            </Card>
            </div>
            <Button style={{ float: 'right', margin: '10px 0' }}>导出</Button>
            <Table columns={columns} dataSource={educatelist} loading={loading}
                summary={() => (
                    <Table.Summary fixed>
                        <Table.Summary.Row>
                            <Table.Summary.Cell index={0}>合计</Table.Summary.Cell>
                            <Table.Summary.Cell index={1}></Table.Summary.Cell>
                            <Table.Summary.Cell index={2}>920</Table.Summary.Cell>
                            <Table.Summary.Cell index={3}>100%</Table.Summary.Cell>
                        </Table.Summary.Row>
                    </Table.Summary>
                )}
            />

        </div>
    );
}

export default DataEducation;